<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>MD</title>
<link rel="shortcut icon" type="image/x-icon" href="../../static/image/logo.ico" media="screen" />
<link rel="stylesheet" type="text/css" href="../../static/scripts/element-ui/lib/theme-chalk/index.css">  
<script type="text/javascript" src="../../static/scripts/vue.js"></script>
<script type="text/javascript" src="../../static/scripts/vue-router.js"></script>  
<script type="text/javascript" src="../../static/scripts/axios.js"></script>  
<script type="text/javascript" src="../../static/scripts/element-ui/lib/index.js"></script>  
<style>
.el-menu-vertical-demo:not (.el-menu--collapse ) {
	width: 200px;
}

.el-header {
	width: 100%;
	background-color: #B3C0D1;
    color: #333;
	line-height: 60px;
	text-align: center;
	position: fixed; 
 	top:0px;
}

.el-footer {
	width: 100%;
	background-color: #B3C0D1;
    color: #333;
	line-height: 60px;
	text-align: center;
 	position: fixed; 
 	bottom:0px; 
}

.el-aside {
/*     background-color: #D3DCE6; */
    color: #333;
    position: fixed; 
 	top:60px;
 	bottom:60px;
}

.el-main {
width: 100%;
/*     background-color: #E9EEF3; */
    color: #333;
/*     text-align: center; */
/*     line-height: 160px; */
    position: fixed; 
    left:310px;
 	top:60px;
 	bottom:60px;
  }
</style>

</head>
<body>
	<div id="app">
		<el-container>
		    <el-header>Header</el-header>
		    <el-container>
		        <el-aside>
		            <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
                        <el-radio-button :label="false">展开</el-radio-button>
                        <el-radio-button :label="true">收起</el-radio-button>
                    </el-radio-group>
                    <el-menu class="el-menu-vertical-demo" :collapse="isCollapse">
                    
<!--                     循环navList数组，将每项的值及index传给nav-item组件 -->
                     <nav-item v-for="(item, index) in navList"  :item="item" :key="index">
                     </nav-item>
                    </el-menu>
			    </el-aside>
		        <el-main>
                    <el-tabs type="card" closable >
                        <el-tab-pane label="首页">首页</el-tab-pane>
                        <el-tab-pane label="消息中心">消息中心</el-tab-pane>
                        <el-tab-pane label="角色管理">角色管理</el-tab-pane>
                        <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>
                    </el-tabs>
                </el-main>
		    </el-container>
		    <el-footer>Footer</el-footer>
		<el-container>
	</div>
</body>

<script>
	new Vue({
		el : "#app",
		data : {
			isCollapse : false,
			navList: [
			    {
			    	id:'0',
			        path: '/home',
			        name: '首页'
			    },
			    {
			    	id:'1',
			        name: '系统组件',
			        child: [
			            {
			            	id:'1-1',
			                name: '介绍',
			                path: '/components'
			            },
			            {
			            	id:'1-2',
			                name: '功能类',
			                child: [
			                    {
			                    	id:'1-2-1',
			                        path: '/components/permission',
			                        name: '详细鉴权'
			                    },
			                    {
			                    	id:'1-2-2',
			                        path: '/components/pageTable',
			                        name: '表格分页'
			                    }
			                ]
			            }
			        ]
			    }
			],   
			editableTabsValue2 : '2',
			editableTabs2 : [ {
				title : 'Tab 1',
				name : '1',
				content : 'Tab 1 content'
			}, {
				title : 'Tab 2',
				name : '2',
				content : 'Tab 2 content'
			} ],
			tabIndex : 2
		},
		components:{
			'nav-item': {
				template:`<el-submenu v-if="item.child && item.child.length" :index="item.id"> 
                              <template slot="title">
                                  <i class="el-icon-menu"></i>
                                  <span slot="title">{{ item.name }}</span>
                              </template>
                              <nav-item v-for="(subItem,i) in item.child" :key="item.id+'-'+i" :item="subItem" > 
                              </nav-item>
                          </el-submenu>
                          <el-menu-item v-else :index="item.id">{{ item.name }}</el-menu-item>`,
                 name:'navItem',
                 props: ['item']
				
			}
		},
		methods : {
			addTab : function(targetName) {
// 				newTabName = ++this.tabIndex + '';
// 				this.editableTabs2.push({
// 					title : 'New Tab',
// 					name : newTabName,
// 					content : 'New Tab content'
// 				});
// 				this.editableTabsValue2 = newTabName;
			},
			removeTab : function(targetName) {
// 				tabs = this.editableTabs2;
// 				activeName = this.editableTabsValue2;
// 				if (activeName === targetName) {
// 					// 	            tabs.forEach((tab, index)) {
// 					// 	              if (tab.name === targetName) {
// 					// 	                let nextTab = tabs[index + 1] || tabs[index - 1];
// 					// 	                if (nextTab) {
// 					// 	                  activeName = nextTab.name;
// 					// 	                }
// 					// 	              }
// 					// 	            });
// 				}

				// 	          this.editableTabsValue2 = activeName;
				// 	          this.editableTabs2 = tabs.filter(tab = tab.name !== targetName);
			}
		}
	});
</script>
</html>